<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
</head>

<body>
  <div id="app">
    <!--
 input
el-input   v-model值的绑定   prefix-icon="字符串"  show-password="boolean"
珊拦布局
  el-row :行
    el-col  :span="一行24列(number)"
button
 el-button  type="primary"
link
  el-link  type="primary"
表单
   el-form  model:数据绑定  label-width:标题宽度
       el-form-item  每一个子项   label:标题  label-width:标题宽度
表单验证
   1：首先在el-form上加一个model绑定
   2：在el-form上加一个rules（添加相应的验证规则）属性  rules的值是对象类型
   3:在需要验证的子项上加上一个prop绑定（需要验证的字段名）
   rules:{
           prop绑定的值: [
            { required: true(必填), message: '错误信息', trigger: 'blur/change' },
            { min: 最小长度, max: 最大长度, message: '错误信息', trigger: 'blur/change' }
          ],
   }
全局验证：调用el-form表单组件methods里面的一个validate方法
父传子：1：在子组件标签上定义一个ref  ref=值
       2：通过ref拿到该子组件的this===this.$refs.ref值
       this.$refs.ref值.validate((result)=>{
           true:表示验证成功
           false:验证失败
       }
       )
表单重置：调用el-form表单组件methods里面的一个resetFields方法
      1：在子组件标签上定义一个ref  ref=值
      2：通过ref拿到该子组件的this===this.$refs.ref值
      this.$refs.ref值.resetFields()
-->
    <el-form ref="form" :model="form" label-width="80px" :rules="rules">
      <el-form-item label="用户名" prop="username">
        <el-input prefix-icon="el-icon-user" v-model="form.username"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="form.password"></el-input>
      </el-form-item>
      <el-form-item label-width="0px">
        <el-button type="primary" @click="toLogin">登陆</el-button>
        <el-button type="primary" @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
  <script src="./vue.js"></script>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="./element.css" />
  <!-- 引入组件库 -->
  <script src="./ele.js"></script>
  <script>
    new Vue({
      el: "#app",
      methods: {
        toLogin() {
          this.$refs.form.validate((result) => {
            if (result) {
              this.$message.success("验证通过");
            } else {
              this.$message.error("验证失败");
            }
          });
        },
        reset() {
          this.$refs.form.resetFields();
        },
      },
      data: {
        form: {
          username: "",
          password: "",
        },
        rules: {
          username: [
            {
              required: true,
              messages: "请输入用户名",
              trigger: "change",
            },
            {
              min: 6,
              max: 6,
              message: "请输入长度为6的用户名",
              trigger: "change",
            },
          ],
          password: [
            { required: true, message: "请输入密码", trigger: "blur" },
            { min: 6, max: 12, message: "请输入6-12位密码", trigger: "blur" },
          ],
        },
      },
    });
  </script>
</body>

</html>